// 父组件
import React from 'react'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'
import store from '../stores/store'
import actions from '../actions/actions'
import List from './list'


// export default class Todo extends React.Component {

const Todo = React.createClass({
  // 绑定reflux和组件
  mixins: [
    Reflux.connect(store, "data") //方法一
    // Reflux.listenTo(store, 'onStatusChange') // 方法二
  ],

  getInitialState() {
    return {
      data: []
    }
  },
  onStatusChange: function(list) {
    this.setState({
      data: list
    });
  },
  //组件渲染完成后，通过action获取所有的数组，刷新绑定到this.state上
  componentDidMount() {
    console.log("componentDidMount")
    actions.getAll();
  },

  add() {
    var item = this.refs.item.value;
    this.refs.item.value = '';
    actions.add(item);
  },

  render() {
    //items用于乘放li的集合
    // var items;
    // if (this.state.data.list) {
    //   items = this.state.data.list.map((item, i) => {
    //     //设置key是因为react的diff算法，是通过key来计算最小变化的
    //     return <li key={i}>
    //       {item.name}
    //       <button onClick={this.remove.bind(this,i)}>remove</button>
    //     </li>
    //   })
    // }

    return (
      <div>
        <input type="text" ref="item" />
        <button onClick={this.add}>add</button>
        {/*<ul>
          {items}
        </ul>*/}
        <List dataList ={this.state.data.list} />
      </div>
    )
  }
})

export default Todo;
// ES6 mixin写法，通过mixin将store的与组件连接，功能是监听store带来的state变化并刷新到this.state
// ReactMixin.onClass(Todo, Reflux.connect(store));